<template>
  <div class="headerTop">
      <header v-bgColor>
          <span>{{leftText}}</span>
          <div>{{title}}</div>
          <span @click="setColor">{{rightText}}</span>
      </header>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
      title:{
        type:String,
        default:'用户登录'
      },
      rightText:{
         type:String,
         default:'切换主题'
      },
      leftText:{
        type:String,
        default:''
      }
  },
  methods: {
    setColor(){
        this.$emit('clickRight')
        this.$emit('goBook')
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.headerTop{
    header{
        display: flex;
        height: 50px;
        align-items: center;
        justify-content: space-around;
        background: red;
        color:#fff;
        padding: 0 20px;
        >div{
            flex:1;
            text-align: center;
        }
    }
}
</style>
